<template>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录表单 -->
        <form action="#" class="sign-in-form">
          <h1 class="Big_title">Personnal Time Management Website</h1>
          <h2 class="title">LOG IN</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input v-model="signInUsername" type="text" placeholder="username" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input v-model="signInPassword" type="password" placeholder="password" />
          </div>
          <t-button theme="primary" shape="round" variant="base" size="large" class="btn" @click="signIn">SIGN IN</t-button>
          <t-dialog
            v-model:visible="visible2"
            theme="success"
            header="Congratulation"
            body="You have successfully logged in!"
            :on-close="close2"
            :cancel-btn="null"
            @confirm="onClickConfirm"
          />
          <t-dialog
            v-model:visible="visible3"
            theme="danger"
            header="Warning"
            body="Sorry, the user information could not be matched. If you haven't registered yet, please create your personal account first!"
            :on-close="close3"
            :cancel-btn="null"
            @confirm="onClickConfirm"
          />
        </form>

        <!-- 注册表单 -->
        <form action="#" class="sign-up-form">
          <h1 class="Big_title">Personnal Time Management Website</h1>
          <h2 class="title">REGISTER</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input v-model="signUpUsername" type="text" placeholder="username" />
          </div>
          <div class="input-field">
            <i class="fas fa-envelope"></i>
            <input v-model="email" type="email" placeholder="e-mail" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input v-model="signUpPassword" type="password" placeholder="password" />
          </div>
          <t-button theme="primary" shape="round" variant="base" size="large" class="btn" @click="handleSignUp">SIGN UP</t-button>
          <t-dialog
            v-model:visible="dialogVisible"
            theme="success"
            header="Congratulation"
            body="You have successfully registered!"
            :on-close="closeDialog"
            :cancel-btn="null"
            @confirm="onClickConfirm"
          />
        </form>
      </div>
    </div>
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>JOIN US</h3>
          <p>Join us and become a part of this site!</p>
          <button class="btn transparent" id="sign-up-btn" @click="switchToSignUp">GO TO REGISTER</button>
        </div>
        <img src="../img/OOTD.png" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>Existing account?</h3>
          <p>Log in to your existing account and enjoy exclusive rights!</p>
          <button class="btn transparent" id="sign-in-btn" @click="switchToSignIn">GO TO LOG IN</button>
        </div>
        <img src="../img/OOTB.png" class="image" alt="" />
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default{
  data() {
    return {
      signInUsername: "",
      signInPassword: "",
      signUpUsername: "",
      email: "",
      signUpPassword: "",
      visible2: false,
      visible3: false,
      dialogVisible: false
    };
  },
  methods: {
    switchToSignUp() {
      const container = document.querySelector(".container");
      container.classList.add("sign-up-mode");
    },
    switchToSignIn() {
      const container = document.querySelector(".container");
      container.classList.remove("sign-up-mode");
    },
    handleSignUp() {
      const user = {
        username: this.signUpUsername,
        email: this.email,
        password: this.signUpPassword
      };

      // Save user information in localStorage
      localStorage.setItem("user", JSON.stringify(user));

      // Show success dialog
      this.dialogVisible = true;
    },
    signIn() {
      // Retrieve user information from localStorage
      const savedUser = localStorage.getItem("user");
      const user = JSON.parse(savedUser);

      if (user && user.username === this.signInUsername && user.password === this.signInPassword) {
        this.visible2 = true;
        this.$router.push("/home"); // Show success dialog
      } else {
        this.visible3 = true; // Show error dialog
      }
    },
    close2() {
      this.visible2 = false;
    },
    close3() {
      this.visible3 = false;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    onClickConfirm() {
      // Reset form values
      this.signInUsername = "";
      this.signInPassword = "";
      this.signUpUsername = "";
      this.email = "";
      this.signUpPassword = "";
      this.close2();
      this.close3();
      this.closeDialog();
    }
  }
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
width: 90vw; /* 设置宽度为视口宽度的100% */
height: 110vh; /* 设置高度为视口高度的100% */}

body,
input {
font-family: "Poppins", sans-serif;
}

.container {
width: 800px;
height: 700px;
background-color: rgb(255, 247, 194);
min-height: 100vh;
overflow: hidden;
left: -10px;
transform:translate(-120px);

}

.forms-container {
position: absolute;
width: 100%;
height: 85%;

}

.signin-signup {
position: absolute;
top: 70%;
left: 80%; /* 调整为适当的值 */
width: 70%;
transform: translate(-50%, -50%);
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
color: rgb(253, 119, 89);
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
color:  rgb(253, 119, 89);
}

form.sign-up-form {
opacity: 0;
z-index: 1;
margin-top: -15px;
top: 40%;
}

form.sign-in-form {
z-index: 2;
margin-bottom: 120px;
left: 42%;
transform: translate(1%, 0);
}

.title {
font-size: 2.2rem;
color:  rgb(253, 119, 89);
margin-bottom: 10px;
margin-right: 100px;
top: auto;
padding-left: 1%;
}


.Big_title {
font-size: 2.5rem;
color: rgb(10, 5, 4);
margin-bottom: 15px;
margin-right: 100px;
left: 80%;
top: auto;
font-style: italic;
padding-left: 5%;
}

.input-field {
max-width: 400px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
right: 50px;
padding-right: 15%;
}

.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
padding-left: 10%;
}

.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
padding-left: -10%;
}

.input-field input::placeholder {
color: #aaa;
font-weight: 500;
padding-left: -10%;
padding-right: 5%;
}

.btn {
width: 150px;
background-color: rgb(253, 119, 89);
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
margin-right: 100px;
}

.btn:hover {
background-color:  rgb(253, 119, 89);
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
 color: rgb(253, 119, 89);
}

.container:before {
content: "";
position: absolute;
height: 2400px;
width: 2400px;
top: -10%;
right: 40%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, rgb(243, 197, 112) 0%, #fe4b04 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;

}

.image {
width: 150%;
height: 110%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
display: flex;
}

.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}

.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
margin-left: 350px;
}

.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
margin-left: 300px;
margin-top: 300px;
}

.panel .content {
color: #000;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}

.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}

.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}

.btn.transparent {
margin: 0;
background: none;
border: 2px solid #fff;
width: 200px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
transform: translate(100%, -60%);
right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
left: 10%;
}

.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}

.container.sign-up-mode form.sign-in-form {
opacity: 0;
z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
pointer-events: none;
}

.container.sign-up-mode .right-panel {
pointer-events: all;
}

.container {
  height: 920px;
  width: 1470px;
  color: rgb(253, 119, 89);
}
.signin-signup {
  width: 100%;
  top: 95%;
  transform: translate(-50%, -100%);
  transition: 1s 0.8s ease-in-out;
}

.signin-signup,
.container.sign-up-mode .signin-signup {
  left: 50%;
}

.panels-container {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.panel {
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 2.5rem 8%;
  grid-column: 1 / 2;
}

.right-panel {
  grid-row: 3 / 4;
}

.left-panel {
  grid-row: 1 / 2;
}

.image {
  width: 200px;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
  color:  rgb(253, 119, 89);
}

.panel .content {
  padding-right: 15%;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.8s;
}

.panel h3 {
  font-size: 1.2rem;
}

.panel p {
  font-size: 0.7rem;
  padding: 0.8rem 0;
}

.btn.transparent {
  width: 110px;
  height: 35px;
  font-size: 0.7rem;
}

.container:before {
  width: 1920px;
  height: 1920px;
  transform: translateX(-50%);
  left: 50%;
  bottom: 70%;
  right: initial;
  top: initial;
  transition: 2s ease-in-out;
}

.container.sign-up-mode:before {
  transform: translate(-50%, 100%);
  bottom: 3%;
  right: initial;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateY(-200px);
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateY(-190px);
}

.right-panel .image,
.right-panel .content {
  transform: translateY(100px);
}

.container.sign-up-mode .signin-signup {
  top: 10%;
  transform: translate(-50%, 0);
}

form {
  padding: 0 1.5rem;
}
.panel .content {
  padding: 0.5rem 1rem;
}
.container {
  padding: 1.2rem;
}

.container:before {
  bottom: 80%;
  left: 48%;
}

.container.sign-up-mode:before {
  bottom: 38%;
  left: 48%;
}



</style>